<template>
    <div class="p-">
        <div class="text-center text-slate-300 flex items-center justify-center">
            数据总量:<span ref="totalCount" class="text-7xl mx-4 font-bold">{{ props.data.total }}</span>条记录
        </div>
        <div class="flex flex-wrap">
            <div class="text-center w-1/3 text-slate-400 text-sm flex items-center justify-center">
                华北:<span ref="city1" class=" text-3xl mx-2  text-[#5dc5ef]">{{ props.data.hb }}</span>
            </div>
            <div class="text-center w-1/3 text-slate-400 text-sm flex items-center justify-center">
                东北:<span ref="city2" class=" text-3xl mx-2  text-[#5dc5ef]">{{ props.data.db }}</span>
            </div>
            <div class="text-center w-1/3 text-slate-400 text-sm flex items-center justify-center">
                华东:<span ref="city3" class=" text-3xl mx-2  text-[#5dc5ef]">{{ props.data.hd }}</span>
            </div>
            <div class="text-center w-1/3 text-slate-400 text-sm flex items-center justify-center">
                中南:<span ref="city4" class=" text-3xl mx-2  text-[#5dc5ef]">{{ props.data.zn }}</span>
            </div>
            <div class="text-center w-1/3 text-slate-400 text-sm flex items-center justify-center">
                西南:<span ref="city5" class=" text-3xl mx-2  text-[#5dc5ef]">{{ props.data.xn }}</span>
            </div>
            <div class="text-center w-1/3 text-slate-400 text-sm flex items-center justify-center">
                西北:<span ref="city6" class=" text-3xl mx-2  text-[#5dc5ef]">{{ props.data.xb }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { CountUp } from 'countup.js'
import { ref, onMounted } from 'vue'
const props = defineProps(['data'])
const totalCount = ref(null)
const city1 = ref(null)
const city2 = ref(null)
const city3 = ref(null)
const city4 = ref(null)
const city5 = ref(null)
const city6 = ref(null)
onMounted(() => {
    new CountUp(totalCount.value, props.data.total).start()
    new CountUp(city1.value, props.data.hb).start()
    new CountUp(city2.value, props.data.db).start()
    new CountUp(city3.value, props.data.hd).start()
    new CountUp(city4.value, props.data.zn).start()
    new CountUp(city5.value, props.data.xn).start()
    new CountUp(city6.value, props.data.xb).start()

})

</script>

<style lang="scss" scoped></style>